$(function () {
  let obj = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '',
    state: ''
  }

  /**
   * 把虚拟DOM渲染数据到列表上
   */
  getArti(obj, getArtiList)

  /**
   * 渲染文章分类
   */
  getArtiPubList()

  /**
   * 筛选
   */
  $('#formArtiList').on('submit', function (e) {
    e.preventDefault()
    console.log(obj)
    obj.cate_id = $('[name=cate_id]').val()
    obj.state = $('[name=state]').val()
    // getArti(obj, getArtiList)
  })

  /**
   * 分页函数
   */
  function renderPage(total) {
    var laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
      elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: obj.pagesize,
      curr: obj.pagenum,
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [2, 5, 10, 15, 20],
      jump: function (ob, first) {
        //首次不执行
        if (!first) {
          //do something
          obj.pagenum = ob.curr
          obj.pagesize = ob.limit
          getArti(obj, getArtiList)
        }
      }
    });
  }

  /**
   * 使用index.js的axios封装方法构建虚拟DOM
   */
  function getArtiList(res) {
    let arr = []
    res.data.forEach(ele => {
      arr.push(`
        <tr>
          <td>
            <a data-id="${ele.Id}" class="list-a" href="javascript:;">${ele.title}</a>
          </td>
          <td>${ele.cate_name}</td>
          <td>${data(ele.pub_date)}</td>
          <td>${ele.state}</td>
          <td>
            <a href="/article/arti_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
            <button data-id="${ele.Id}" class="btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
          </td>
        </tr>
    `)
    })
    $('tbody').empty().html(arr.join(''))
    //分页
    renderPage(res.total)
  }

  /**
   * 删除
   */
  $('tbody').on('click', '.btn-del', function () {
    let id = $(this).attr('data-id')
    layer.confirm('是否确认删除文章?', { icon: 3, title: '提示' }, function (index) {
      //发送axios
      axios({
        url: '/my/article/delete/' + id
      }).then(({ data: res }) => {
        //成功回调
        if (res.status != 0) {
          return layui.layer.msg(res.message)
        }
        layui.layer.msg('恭喜您，删除文章成功！')
        if (obj.pagenum >= 2 && $('.btn-del').length == 1) {
          obj.pagenum--
        }
        getArti(obj, getArtiList)
      }).catch(() => {
        layui.layer.msg('页面错误，请联系管理员')
      })
      layer.close(index);
    });
  })

  /**
   * 查看信息
   */
  $('tbody').on('click', '.list-a', function () {
    let id = $(this).attr('data-id')
    axios({
      url: '/my/article/' + id
    }).then(({ data: res }) => {
      //成功回调
      if (res.status != 0) {
        return layui.layer.msg(res.message)
      }
      layer.open({
        type: 1,
        title: '文章详情',
        area: ['980px', '500px'],
        content: `
        <h1>${res.data.title}</h1>
        <div class="text">
          <span>作者：${res.data.author_id}</span>
          <span>发布时间：${data(res.data.pub_date)}</span>
          <span>所属分类：${res.data.cate_id}</span>
          <span>状态：${res.data.state}</span>
          </div>
          <hr>
          <img src="http://api-breakingnews-web.itheima.net${res.data.cover_img}" alt="">
          <span>${res.data.content}</span>
        `,
      })
    });
  })
})

